Top React Hooks — Mouse, Keyboard, and States

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-hanger

The react-hanger library comes with various hooks we can use to do various things.

To install it, we run:

yarn add react-hanger

The usePrevious hook lets us get the previous value from the useState hook.

For instance, we can write:

import React from "react";
import { usePrevious } from "react-hanger";

export default function App() {
  const [count, setCount] = React.useState(0);
  const prevCount = usePrevious(count);
  return (
    <>
      <button onClick={() => setCount(count => count + 1)}>increment</button>
      <p>
        Now: {count}, before: {prevCount}
      </p>
    </>
  );
}

Then we have the count state with the setCount function returned from useState .

Then we pass the count state into the usePrevious hook to get the previous value of the count state returned.

React Mighty Mouse

React Mighty Mouse is a library with a hook that lets us track the mouse position.

To install it, we can run:

npm install react-hook-mighty-mouse

Then we can use it by writing:

import React from "react";
import useMightyMouse from "react-hook-mighty-mouse";

export default function App() {
  const { position } = useMightyMouse();
  return (
    <div>
      x:{position.client.x} y:{position.client.y}
    </div>
  );
}

We use the useMightyMouse hook to get an object with the position property.

Then we can get the mouse position as we move it with the client.x and client.y properties to get the x and y coordinates respectively.

react-hook-mousetrap

The react-hook-mousetrap library lets us watch for presses of a keyboard key combination.

We install it by running:

npm i react-hook-mousetrap

Then we can use it by writing:

import React from "react";
import useMousetrap from "react-hook-mousetrap";

export default function App() {
  useMousetrap(
    "ctrl+enter", () => {
      console.log("ctrl+enter pressed");
    }
  );

  return <div />;
}

We use the useMousetrap hook with the first argument being the key combination we want to track.

And the 2nd argument is the callback to run when the key combination is pressed.

React hookedUp

React hookedUp is a library with many hooks to make our lives easier.

To install it, we run:

npm install react-hookedup --save

or:

yarn add react-hookedup

Then we can start using various hooks that it comes with.

It comes with the useArray hook to let us manipulate arrays easily.

For instance, we can write:

import React from "react";
import { useArray } from "react-hookedup";

export default function App() {
  const { add, clear, removeIndex, value: currentArray } = useArray([
    "cat",
    "dog",
    "bird"
  ]);

  return (
    <>
      <button onClick={() => add("moose")}>add</button>
      <button onClick={() => clear()}>clear</button>
      <button onClick={() => removeIndex(currentArray.length - 1)}>
        remove index
      </button>
      <p>{currentArray.join(", ")}</p>.
    </>
  );
}

We have the useArray hook with the initial array as the value.

Then it returns the add , clear , and removeIndex methods to let us manipulate the array.

value has the current value.

add lets us append an entry.

clear clears the array.

removeIndex removes an item by its index.

Conclusion

The react-hanger and React hookedUp libraries comes with many hooks to help us manage states.

React Mighty Mouse and react-hook-mousetrap lets us watch for mouse position changes and key combo presses respectively.